<template>
	<view class="content font_family" v-if="detail">
		<view class="swiper">
			<view class="back f_zj" :style="{top:menuButtonInfo}" @click="back">
				<image src="../../static/public/back.png" mode=""></image>
			</view>
			<u-swiper height="622rpx" indicatorMode='dot' indicatorActiveColor='#EE4133' indicator radius='0' circular
				:list="detail.images"></u-swiper>
		</view>
		<!-- 内容 -->
		<view class="sp_msg">
			<view class="title">
				<view class="price">
					<text class="icon">￥</text>
					<text v-if="isskulen == 1">{{detail.min_dl_price}}</text>
					<text v-else>{{detail.min_dl_price}}~{{detail.max_dl_price}}</text>
				</view>
				<view class="text">
					{{detail.title}}
				</view>
			</view>
			<!-- <view class="sj f_j" @click="go('/pages/detail/business?id='+detail.dl_id)">
				<u-avatar size="92rpx" mode='aspectFill' :src="detail.dl_avatar"></u-avatar>
				<view class="sj_msg f_d f_z_b">
					<view class="name">
						{{detail.dl_name}}
					</view>
					<view class="start f_j">
						<u-rate count="5" allowHalf v-model="detail.dl_score" size="26rpx" readonly></u-rate>
						<view class="yg">
							{{detail.pay_nums?detail.pay_nums:0}}人已购买商品
						</view>
					</view>
				</view>
				<view class="see f_zj">
					看看
				</view>
			</view> -->
			<view class="pj" v-if="detail.comment_nums">
				<view class="top f_z_b" @click="go('/pages/detail/user_pl?id='+detail.id)">
					<view class="left">
						评价({{detail.comment_nums}})
					</view>
					<view class="right f_j">
						<text>好评率{{detail.good_rate}}%</text>
						<image src="../../static/public/go_h.png" mode=""></image>
					</view>
				</view>
				<view class="user f_j f_z_b">
					<view class="left">
						<view class="user_msg f_j">
							<u-avatar mode='aspectFill' size="66rpx" :src="detail.comment.avatar"></u-avatar>
							<view class="msg_name f_d f_z_b">
								<view class="text">
									{{detail.comment.username}}
								</view>
								<u-rate readonly allowHalf count="5" v-model="detail.comment.score"
									size="26rpx"></u-rate>
							</view>
						</view>
						<view class="user_pj">
							{{detail.comment.content}}
						</view>
					</view>
					<view class="right" v-if="detail.comment.images.length>0">
						<image :src="detail.comment.images[0]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 商品规格 -->
			<view class="sp_detail">
				<view class="sp_title f_j">
					<view class="line">

					</view>
					<view class="text">
						商品规格
					</view>
				</view>
				<view class="gg_item f_j f_z_b" v-for="(item,index) in gg_arr_item" :key="index">
					<view class="left">
						<view class="gg_name">
							规格：{{item.item_name}}
						</view>
						<view class="gg_kc">
							库存：{{item.inventory}}
						</view>
						<view class="gg_price">
							￥{{item.price}}
						</view>
					</view>
					<view class="right f_j" v-if="item.inventory>0">
						<image src="../../static/public/jian_car.png" mode="" @click="jian(item)"></image>
						<view class="gg_num">
							{{item.count}}
						</view>
						<image src="../../static/public/add_car.png" mode="" @click="add(item)"></image>
					</view>
					<view class="right f_j ch" v-else @click="ch_click(item.item_name)">
						<image src="../../static/index/kc_jg.png" mode=""></image>
						<text>催货</text>
					</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="sp_detail">
				<view class="sp_title f_j">
					<view class="line">

					</view>
					<view class="text">
						商品详情
					</view>
				</view>
				<view class="wz">
					<u-parse :content="detail.content"></u-parse>
				</view>
				<!-- <view class="img" v-for="(item,index) in detail.images" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view> -->
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="zw" :style="{height:btn_zw+'px'}">

			</view>
			<view class="btn_box f_j safe_bottom">
				<!-- 商品选购弹窗 -->
				<!-- <view class="xg" @touchmove.stop.prevent="" :style="{height:xg_height+'rpx',top:`-${xg_height}rpx`}">
					<scroll-view scroll-y="true" class="xg_scroll" v-if="xg_show">
						<view class="xg_msg f">
							<image :src="detail.image" mode="aspectFill">
							</image>
							<view class="msg_right f_d f_z_b">
								<view class="right_title">
									{{detail.title}}
								</view>
								<view class="price">
									￥{{detail.multiplejson[gg_check].dl_price}}
								</view>
								<view class="yx">
									<text>已选：</text>
									<text>{{detail.multiplejson[gg_check].title}}</text>
								</view>
							</view>
						</view>
						<view class="xg_gg">
							<view class="gg_title f_j f_z_b">
								<view class="left">
									规格
								</view>
								<view class="right f_j">
									<image src="../../static/public/jian_car.png" mode="" @click="jian"></image>
									<view class="car_num">
										{{goods_msg.count}}
									</view>
									<image src="../../static/public/add_car.png" mode="" @click="add"></image>
								</view>
							</view>
							<view class="item_box f f_w">
								<view class="gg_item" :class="{check_gg:gg_check==index}" @click="gg_click(index)"
									v-for="(item,index) in detail.multiplejson" :key="index">
									{{item.title}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view> -->
				<view class="left f">
					<view class="item mr_30 f_d f_j" @click="collect">
						<image v-if="detail.is_collect===0" src="../../static/public/sc.png" mode=""></image>
						<image v-else src="../../static/public/sc_t.png" mode=""></image>
						<text>收藏</text>
					</view>
					<button class="item  mr_30 f_d f_j btn_item" open-type="share">
						<image src="../../static/public/zf.png" mode=""></image>
						<text>分享</text>
					</button>
					<view class="item f_d f_j car_btn" @click="go_car">
						<image src="../../static/public/car.png" mode=""></image>
						<text>购物车</text>
						<view class="car_tag">{{car_show_nums}}</view>
					</view>
				</view>
				<view class="right f">
					<!-- <view class="add_btn f_z" @click="add_car(detail.multiplejson[gg_check].title)">
						加入购物车
					</view> -->
					<view class="add_btn f_z" @click="add_car()">
						加入购物车
					</view>
					<!-- <view class="buy f_z" @click="xg_click" v-if="!xg_show">
						立即购买
					</view> -->
					<view class="buy f_z" @click="lj_zf">
						立即下单
					</view>
				</view>
			</view>
		</view>
		<view class="mask" @touchmove.stop.prevent v-if="xg_show" @click="mask_click">

		</view>
		<!-- 客服悬浮按钮 -->
		<movable-area class="js_movable">
			<movable-view x="350" y="760" direction="all" class="js_view f_zj">
				<button open-type="contact" class="f_d f_j kf_btn">
					<image src="../../static/public/kf.png" mode=""></image>
					<view class="">
						客服
					</view>
				</button>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import { goods_detail, carList } from '@/api/page.js'
	import { collection, joinCar, urge, userInfo } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'user_info', 'address_list', 'car_num', 'dl_id'])
		},
		data() {
			return {
				btn_zw: 0,
				xg_height: 0,
				xg_show: false,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				query_data: {
					id: '',
				},
				detail: '',
				gg_check: 0,
				goods_msg: {
					goods_id: '',
					item_name: '',
					count: 1
				},
				isskulen: 0,
				car_show_nums: 0,

				gg_arr_item: [],
				user_check_gg: [], //用户选中的规格
			}
		},
		onLoad(e) {
			this.query_data.id = e.id
			this.goods_msg.goods_id = e.id
			this.get_detail()
			this.get_car_list()
		},
		onReady() {

		},
		onShareAppMessage() {
			return {
				title: this.detail.title,
				imageUrl: this.detail.image,
				path: '/pages/detail/detail?id=' + this.query_data.id
			}
		},
		methods: {
			...mapMutations(['set_car_num', 'set_user_info']),
			xg_click() {
				if (!this.user_info) {
					this.no_login_tip('您还没有登录，是否前往登录？', '/pages/login/login')
					return
				}
				this.xg_height = 700
				this.xg_show = true
			},
			mask_click() {
				this.xg_height = 0
				this.xg_show = false
			},
			// 获取详情
			get_detail() {
				goods_detail(this.query_data).then(res => {
					this.detail = res.data
					//处理规格数组
					this.gg_arr(res.data.multiplejson)
					this.$nextTick(() => {
						this.$u.getRect('.btn_box').then(res => {
							this.btn_zw = res.height
						})
					})
				})
			},
			// 规格数组
			gg_arr(data) {
				let arr = []
				data.forEach(item => {
					let obj = {
						image: this.detail.image,
						title: this.detail.title,
						count: 0,
						item_name: item.title,
						price: item.dl_price,
						inventory: item.inventory
					}
					arr.push(obj)
				})
				this.gg_arr_item = arr

				this.isskulen = arr.length
				console.log(this.gg_arr_item)
			},
			gg_click(index) {
				this.gg_check = index
			},
			// 添加购物车
			// add_car(title) {
			// 	if (!this.user_info) {
			// 		this.no_login_tip('您还没有登录，是否前往登录？', '/pages/login/login')
			// 		return
			// 	}
			// 	this.goods_msg.item_name = title
			// 	if (this.xg_show) {
			// 		joinCar(this.goods_msg).then(res => {
			// 			if (res.code == 1) {
			// 				this.me_show_toast(res.msg)
			// 				this.mask_click()
			// 				// 改变购物车数量
			// 				let num = this.car_num + 1
			// 				this.set_car_num(num)
			// 				this.get_car_list()
			// 			} else {
			// 				this.me_show_toast(res.msg)
			// 			}
			// 		})
			// 	} else {
			// 		this.xg_click()
			// 	}
			// },
			add_car() {
				if (this.user_check_gg.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择需要购买的商品规格！'
					})
					return
				}
				this.user_check_gg.forEach(item => {
					console.log(item.item_name)
					let obj = {
						goods_id: this.query_data.id,
						item_name: item.item_name,
						count: item.count
					}
					joinCar(obj).then(res => {
						if (res.code == 1) {
							this.me_show_toast(res.msg)
							// 改变购物车数量
							let num = this.car_num + 1
							this.set_car_num(num)
							this.get_car_list()
						} else {
							this.me_show_toast(res.msg)
						}
					})
				})
			},
			// 收藏
			collect() {
				if (!this.user_info) {
					this.no_login_tip('您还没有登录，是否前往登录？', '/pages/login/login')
					return
				}
				let obj = {
					good_id: this.query_data.id,
					type: ''
				}
				if (this.detail.is_collect === 0) {
					obj.type = 1
				} else {
					obj.type = 2
				}
				collection(obj).then(res => {
					if (res.code == 1) {
						if (obj.type == 1) {
							this.detail.is_collect = 1
						} else {
							this.detail.is_collect = 0
						}
					} else {
						this.me_show_toast(res.msg)
					}
				})
			},
			add(item) {
				console.log(item)
				if (item.count >= item.inventory) {
					this.me_show_toast('库存不足')
				} else {
					item.count += 1
					this.get_user_check()
				}

				// this.$forceUpdate()
			},
			jian(item) {
				if (item.count <= 0) {
					return
				} else {
					item.count -= 1
				}
				this.get_user_check()
				this.$forceUpdate()
			},
			// 获取用户选中的商品规格
			get_user_check() {
				let arr = []
				this.gg_arr_item.forEach(item => {
					if (item.count > 0) {
						arr.push(item)
					}
				})
				this.user_check_gg = arr
				console.log(this.user_check_gg)
			},
			// lj_zf() {
			// 	if (!this.user_info) {
			// 		this.no_login_tip('还没有登录，前往登录？', '/pages/login/login')
			// 		return
			// 	}
			// 	// if (this.address_list.length == 0) {
			// 	// 	this.no_login_tip('还没有配置收货地址，前往配置', '/pages/my_msg/sh_address')
			// 	// 	return
			// 	// }
			// 	let obj = { //支付页面需要的参数
			// 		goods_id: this.query_data.id,
			// 		item_name: this.detail.multiplejson[this.gg_check].title,
			// 		count: this.goods_msg.count
			// 	}
			// 	let sp = [{
			// 		image: this.detail.image,
			// 		title: this.detail.title,
			// 		count: this.goods_msg.count,
			// 		item_name: this.detail.multiplejson[this.gg_check].title,
			// 		price: this.detail.multiplejson[this.gg_check].dl_price
			// 	}, ]
			// 	let str = JSON.stringify(obj)
			// 	let msg = JSON.stringify(sp)
			// 	this.go(`/pages/order/qr_order?obj=${str}&msg=${msg}`)
			// },
			async lj_zf() {
				if (!this.user_info) {
					this.no_login_tip('还没有登录，前往登录？', '/pages/login/login')
					return
				} else {
					let res = await userInfo({ dl: this.dl_id })
					if (res.code == 1) {
						this.set_user_info(res.data)
						uni.setStorageSync('user_info', res.data)
						if (this.user_info.real != 2) {
							this.no_login_tip('当前店铺信息未认证，前往认证', '/pages/my_msg/dp_msg')
							return
						}
					}
					// return
					// userInfo({ dl: this.dl_id }).then(res => {
					// 	console.log(res, '用户信息')
					// 	if (res.code == 1) {
					// 		this.set_user_info(res.data)
					// 		uni.setStorageSync('user_info', res.data)
					// 		if (this.user_info.real != 2) {
					// 			this.no_login_tip('当前店铺信息未认证，前往认证', '/pages/my_msg/dp_msg')
					// 			return
					// 		}
					// 	}
					// })
				}
				if (this.user_check_gg.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择需要购买的商品规格！'
					})
					return
				}
				// let obj = { //支付页面需要的参数
				// 	goods_id: this.query_data.id,
				// 	item_name: this.detail.multiplejson[this.gg_check].title,
				// 	count: this.goods_msg.count
				// }
				let arr = []
				this.user_check_gg.forEach(item => {
					arr.push({
						goods_id: this.query_data.id,
						item_name: item.item_name,
						count: item.count
					})
				})
				let str = JSON.stringify(arr)
				let msg = JSON.stringify(this.user_check_gg)
				this.go(`/pages/order/qr_order?obj=${str}&msg=${msg}`)
			},
			get_car_list() {
				if (this.user_info) {
					carList({ dl: this.dl_id }).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.car_show_nums = res.data.length
						}
					})
				}
			},
			go_car() {
				uni.switchTab({
					url: '/pages/car/car'
				})
			},
			ch_click(item_name) {
				urge({ goods_id: this.query_data.id, item_name }).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.swiper {
			position: relative;

			.back {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9999;
				background: #232323;
				border-radius: 50%;
				opacity: 0.5;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.sp_msg {
			padding: 30rpx;
			padding-bottom: 40rpx;

			.title {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.price {
					font-weight: 400;
					font-size: 48rpx;
					color: #FF3767;

					.icon {
						font-size: 28rpx;
					}
				}

				.text {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #232323;
				}
			}

			.sj {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.sj_msg {
					margin-left: 15rpx;

					.name {
						font-weight: 400;
						font-size: 36rpx;
						color: #000000;
					}

					.start {

						.yg {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
						}
					}
				}

				.see {
					margin-left: auto;
					width: 120rpx;
					height: 58rpx;
					background: #000000;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.pj {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.top {
					.left {
						font-weight: 400;
						font-size: 32rpx;
						color: #232323;
					}

					.right {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;

						image {
							margin-left: 15rpx;
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.user {
					margin-top: 30rpx;

					.left {
						.user_msg {
							.msg_name {
								margin-left: 20rpx;

								.text {
									font-weight: 250;
									font-size: 20rpx;
									color: #232323;
								}
							}
						}

						.user_pj {
							margin-top: 10rpx;
							font-weight: 250;
							font-size: 28rpx;
							color: #232323;
						}
					}

					.right {
						margin-left: 15rpx;

						image {
							width: 182rpx;
							height: 138rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}
				}
			}

			.sp_detail {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.sp_title {
					.line {
						width: 10rpx;
						height: 32rpx;
						background: #EE4133;
						border-radius: 316rpx 316rpx 316rpx 316rpx;
					}

					.text {
						margin-left: 25rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}

				.gg_item {
					margin-top: 20rpx;
					background-color: #F4F5FA;
					padding: 30rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					.left {
						.gg_name {
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
						}

						.gg_kc {
							margin-top: 25rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
						}

						.gg_price {
							margin-top: 25rpx;
							font-weight: 400;
							font-size: 34rpx;
							color: #FF3767;
						}
					}

					.right {
						image {
							width: 40rpx;
							height: 40rpx;
						}

						.gg_num {
							width: 100rpx;
							text-align: center;
						}
					}

					.ch {
						background-color: #EE4133;
						padding: 5rpx 15rpx;
						border-radius: 1000rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}

						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.wz {
					font-weight: 400;
					font-size: 28rpx;
					color: #232323;
					margin-top: 30rpx;
				}

				.img {
					margin-top: 30rpx;

					image {
						width: 100%;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
					}
				}
			}
		}

		.bottom {
			width: 100%;

			.btn_box {
				z-index: 99999;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				width: 100%;
				// height: 98rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.xg {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
					transition: all 0.2s ease-in-out;

					.xg_scroll {
						box-sizing: border-box;
						padding: 30rpx;
						height: 100%;
						width: 100%;

						.xg_msg {
							image {
								width: 194rpx;
								height: 194rpx;
								border-radius: 16rpx 16rpx 16rpx 16rpx;
							}

							.msg_right {
								// height: 100%;
								flex: 1;
								margin-left: 20rpx;

								.right_title {
									font-weight: 400;
									font-size: 32rpx;
									color: #232323;
								}

								.price {
									font-weight: 400;
									font-size: 40rpx;
									color: #FF3767;
								}

								.yx {
									font-weight: 250;
									font-size: 28rpx;
									color: #666666;
								}
							}
						}

						.xg_gg {
							margin-top: 30rpx;

							.gg_title {
								font-weight: 250;
								font-size: 28rpx;
								color: #232323;

								.right {
									image {
										width: 35rpx;
										height: 35rpx;
									}

									.car_num {
										z-index: 9999;
										color: #000000;
										width: 80rpx;
										text-align: center;
									}
								}
							}

							.item_box {}

							.gg_item {
								padding: 14rpx 48rpx;
								background: rgba(35, 35, 35, 0.06);
								border-radius: 59rpx 59rpx 59rpx 59rpx;
								margin-top: 25rpx;
								margin-right: 24rpx;
							}

							.check_gg {
								background: rgba(238, 65, 51, 0.1) !important;
								color: #EE4133 !important;
							}
						}
					}
				}

				.left {
					.mr_30 {
						margin-right: 30rpx;
					}

					.car_btn {
						position: relative;

						.car_tag {
							font-weight: 250;
							font-size: 18rpx;
							color: #FFFFFF;
							position: absolute;
							padding: 3rpx 8rpx;
							border-radius: 20rpx;
							top: -10rpx;
							right: 0rpx;
							background-color: #EE4133;
						}
					}

					.item {

						image {
							width: 40rpx;
							height: 40rpx;
						}

						text {
							font-weight: 250;
							font-size: 20rpx;
							color: #232323;
						}
					}

					.btn_item {
						background: none;
						padding: 0rpx;
						line-height: normal;
					}

					.btn_item::after {
						border: none;
					}
				}

				.right {
					margin-left: auto;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;

					.add_btn {
						padding: 18rpx 0rpx;
						width: 206rpx;
						background: #313132;
						border-radius: 35rpx 35rpx 35rpx 35rpx;
					}

					.buy {
						margin-left: 36rpx;
						padding: 18rpx 0rpx;
						width: 206rpx;
						background: #EE4133;
						border-radius: 35rpx 35rpx 35rpx 35rpx;
					}
				}
			}
		}

		.mask {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.3);
		}
	}
</style>